<script setup>
import rftitle from './rftitle.vue'
import { left4Data } from '../pages/home/index'

</script>

<template>
  <!-- 三防状态 -->
  <div class="h-[58px]"></div>
  <div class="w-[320px] h-[36px] mx-auto relative">
    <img class="w-full h-full" src="../assets/one/one_left_2.png" alt="">
    <img class="w-[80px] h-[36px] left-[40px] bottom-[12px] absolute" src="../assets/one/one_left_3.png" alt="">
    <img class="w-[48px] h-[48px] left-[56px] bottom-[26px] absolute " src="../assets/four/four1.png" alt="">
    <span class="absolute left-[152px] bottom-[16px] text-white text-[15px]">设备运行健康状态</span>
    <span :class="left4Data.sbyxzt == '异常' ? 'status_color_red' : 'main_color'"
      class="absolute left-[152px] bottom-[42px] text-white text-[24px] main_color font-semibold">{{ left4Data.sbyxzt
      }}</span>
  </div>

  <rftitle class="mt-[48px] mb-[36px]" title="水箱水位"></rftitle>
  <div class="flex items-center mb-[88px]">
    <div class="w-[80px] h-[80px] liubian flex justify-center items-center">
      <img class="w-[24px] h-[24px] " src="../assets/four/four2.png" alt="">
    </div>
    <div class="text-[15px] text-white flex-1 pl-[24px]">
      <div>生活水库水位高度</div>
      <div class="text-[24px] font-semibold  mt-[8px] status_color_blue">{{ left4Data.shskswgd
        }}</div>
    </div>
    <div class="text-[15px] text-white flex-1 pl-[24px]">
      <div>生活水库液位状态</div>
      <div :class='left4Data.shskswzt == "正常" ? "main_color" : "status_color_red"'
        class="text-[24px] font-semibold  mt-[8px] ">{{
      left4Data.shskswzt }}
      </div>
    </div>
  </div>

  <div class="flex items-center mb-[88px]">
    <div class="w-[80px] h-[80px] liubian flex justify-center items-center">
      <img class="w-[24px] h-[24px] " src="../assets/four/four2.png" alt="">
    </div>
    <div class="text-[15px] text-white flex-1 pl-[24px]">
      <div>饮用水库水位高度</div>
      <div class="text-[24px] font-semibold  mt-[8px] status_color_blue">{{ left4Data.yinyskswgd }}</div>
    </div>
    <div class="text-[15px] text-white flex-1 pl-[24px]">
      <div>饮用水库液位状态</div>
      <div :class="left4Data.yinyskswzt == '正常' ? 'main_color' : 'status_color_red'"
        class=" text-[24px] font-semibold mt-[8px] ">{{ left4Data.yinyskswzt }}</div>
    </div>
  </div>

  <div class="flex items-center mb-[88px]">
    <div class="w-[80px] h-[80px] liubian flex justify-center items-center">
      <img class="w-[24px] h-[24px] " src="../assets/four/four2.png" alt="">
    </div>
    <div class="text-[15px] text-white flex-1 pl-[24px]">
      <div>电站水库水位高度</div>
      <div class="text-[24px] font-semibold  mt-[8px] status_color_blue">{{ left4Data.dzskswgd }}</div>
    </div>
    <div class="text-[15px] text-white flex-1 pl-[24px]">
      <div>电站水库液位状态</div>
      <div :class='left4Data.dzskswzt == "正常" ? "main_color" : "status_color_red"'
        class="text-[24px] font-semibold  mt-[8px] ">{{ left4Data.dzskswzt }}</div>
    </div>
  </div>


  <rftitle class="mb-[36px]" title="污水排水泵状态"></rftitle>
  <div class="flex items-center mb-[48px]">
    <div class="w-[80px] h-[80px] liubian flex justify-center items-center">
      <img class="w-[24px] h-[24px] " src="../assets/four/four5.png" alt="">
    </div>
    <div class="text-[15px] text-white flex-1 pl-[24px]">
      <div>污水井水位</div>
      <div class="text-[24px] font-semibold  mt-[8px] status_color_blue">{{ left4Data.wsjswgd }}</div>
    </div>
    <div class="text-[15px] text-white flex-1 pl-[24px]">
      <div>污水井液位状态</div>
      <div :class='left4Data.wsjswzt == "正常" ? "main_color" : "status_color_red"'
        class="text-[24px] font-semibold  mt-[8px] main_color">{{ left4Data.wsjswzt }}</div>
    </div>
  </div>

</template>

<style scoped></style>
